import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Table, Pagination } from 'antd';
import { getGoods, goodsInit } from '../../../action/actionGoods';
import PaginationConfig from '../../../config/pagination';
import { cdn } from '../../../config/httpConfig';
import goodDefaultImg from '../../../assets/image/noimg.png';
class GoodManagement extends Component {
    constructor () {
        super();
        this.query = {
            page: 1,
            page_size: 30,
        };
        const that = this;
        this.pageConfig = Object.assign({}, PaginationConfig, {
            pageSize: that.query.page_size,
            onChange (page, pageSize) {
                that.pageChangeHandle(page, pageSize);
            },
        });
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                width: 60,
                fixed: 'left',
                render: (text, record, index) => <div>{(this.pageConfig.current - 1) * this.pageConfig.pageSize + index + 1}</div>,
            },
            {
                title: '图片',
                dataIndex: 'images',
                width: 150,
                render: (text, record) => <img style={{width: '50px', height: '50px'}} src={record.images.length > 0 ? cdn + record.images[0] + '-min50x50' : goodDefaultImg} />,
            },
            {
                title: '商品名称',
                dataIndex: 'title',
                width: 260,
                render: (text, record) => <span className='posi_r'>
                    {text}
                    {record.is_new ? <span className='new_goods'>新品</span> : ''}
                </span>,
            },
            {
                title: '选品定级',
                dataIndex: 'level',
                width: 150,
                render: (text, record) => <div>
                    {text}
                </div>,
            },
            {
                title: '规格',
                dataIndex: 'sku_title',
                width: 150,
            },
            {
                title: '品类',
                dataIndex: 'category_title',
                width: 150,
            },
            {
                title: '二级品类',
                dataIndex: 'category_lv2_title',
                width: 150,
            },
            {
                title: '条码',
                dataIndex: 'bar_code',
                width: 200,
            },
            {
                title: '零售价',
                dataIndex: 'price',
                width: 150,
            },
            {
                title: '促销价',
                dataIndex: 'promotion_price',
                width: 150,
            },
            {
                title: '操作',
                width: 320,
                fixed: 'right',
                render: () => <div>操作</div>,
            },
        ];
    }
    pageChangeHandle (page, pageSize) {
        this.pageConfig.current = this.query.page = page;
        this.query.page_size = pageSize;
        this.getList();
    }
    getList () {
        const { dispatch } = this.props;
        dispatch(getGoods({
            query: this.query,
        }));
    }
    componentWillMount () {
        const { isFetching, goods } = this.props;
        if (isFetching === 'success' && typeof (goods) === 'object' && goods.code === 0) return;
        this.getList();
    }
    componentWillUnmount () {
        const { dispatch } = this.props;
        dispatch(goodsInit());
    }
    render () {
        const { goods, isFetching } = this.props;
        let data = [];
        let total = 0;
        if (typeof (goods) === 'object' && goods.code === 0) {
            data = goods.items;
            total = goods.counts;
            this.pageConfig.current = goods.page * 1;
        }
        this.pageConfig.total = total;
        return (
            <div className='app-admin-main'>
                <div className='table-wrapper'>
                    <div className='table-wrapper_table'>
                        {<Table pagination={false} loading={isFetching === 'isFetching'} rowKey={record => record.id} scroll={{ x: '130%' }} columns={this.columns} dataSource={data} />}
                        <Pagination {...this.pageConfig} />
                    </div>
                </div>
            </div>
        );
    }
}
function select (state) {
    return {
        goods: state.goodList.goods,
        isFetching: state.requestStatus.status,
    };
}
export default connect(select)(GoodManagement);
